<template>

  <div>
    <el-button-group >
      <el-button type="success" icon="el-icon-caret-left" size="mini" @click="onBack">返回</el-button>
      <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
      <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </el-button-group>
    <div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div>
    <pdf
        :page="pageNum"
        :src="url"
        @progress="loadedRatio = $event"
        @num-pages="pageTotalNum=$event"
    ></pdf>
  </div>

</template>


<script>
import pdf from 'vue-pdf'

export default {
  name: 'Pdf',
  components: {
    pdf,
  },
  data() {
    return {

      // url: 'http://image.cache.timepack.cn/nodejs.pdf',
      url: 'http://localhost:9091/%E4%BD%8E%E6%B5%93%E5%BA%A6%E6%88%90%E8%86%9C%E8%83%BA%E7%8E%AF%E5%A2%83%E4%B8%8B%E5%8E%8B%E6%B0%B4%E5%A0%86%E6%A0%B8%E7%94%B5%E7%AB%99%E4%BA%8C%E5%9B%9E%E8%B7%AF%E9%87%91%E5%B1%9E%E6%9D%90%E6%96%99%E7%9A%84%E5%9D%87%E5%8C%80%E8%85%90%E8%9A%80%E8%AF%84%E4%BC%B0_%E8%92%8B%E6%99%93%E6%96%8C.pdf',
      pageNum: 1,
      pageTotalNum: 1,
      loadedRatio: 0,
    }
  },
  methods: {
    // 上一页
    prePage() {
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },

    // 下一页
    nextPage() {
      let page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    },
    onBack(){
      this.$router.push(
          {
            path: `/search`
          }
      )
    }
  }
}
</script>